import React, { Component } from 'react'
import intl from 'react-intl-universal'
import { Container, Form, Nav, Navbar, NavDropdown } from 'react-bootstrap'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Language from '../Language/Language'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { httpGet } from '../../services/http'
import { UPDATE_USER, LOGOUT_USER } from '../../constants/user'
import './Header.less'

class Header extends Component {
  state = { isLogin: null }

  select = (eventKey, event) => {
    const { history } = this.props
    event.preventDefault()
    event.stopPropagation()
    history.push(eventKey)
  }

  async componentDidMount () {
    const { dispatch } = this.props
    const token = window.localStorage.getItem('token')
    if (token) {
      let [res, err] = await httpGet({ url: '/user/current' })
      if (res) {
        dispatch({ type: UPDATE_USER, payload: res.data.data })
        this.setState({ isLogin: true })
      } else {
        console.log('Header报错拉', err)
        this.setState({ isLogin: false })
      }
    } else this.setState({ isLogin: false })
  }

  render () {
    const { user, location, dispatch } = this.props
    return (
      <header id = "header">
        <Navbar bg = "dark" variant = "dark" fix = "top" expand = "lg">
          <Container>
            <Navbar.Brand>{intl.get('welcome')}</Navbar.Brand>
            {/* Navbar.Toggle 用于在宽度不够导航栏折叠的情况下显示的下拉框 */}
            <Navbar.Toggle aria-controls = "basic-navbar-nav" />
            {/* Navbar.Collapse 用于存放需要折叠的组件 */}
            <Navbar.Collapse id = "basic-navbar-nav">
              <Nav className = "mr-auto">
                <Nav.Link active = {'/' === location.pathname} href = "/"
                          onSelect = {this.select}>
                  <FontAwesomeIcon icon = "home" />
                  {intl.get('home')}
                </Nav.Link>
                <Nav.Link active = {'/cart' === location.pathname}
                          href = "/cart" onSelect = {this.select}>
                  <FontAwesomeIcon icon = "shopping-cart" />
                  {intl.get('shopping cart')}
                </Nav.Link>
                {
                  this.state.isLogin === null
                    ? <></>
                    : this.state.isLogin
                    ? <NavDropdown
                      href = {'/user'}
                      active = {location.pathname.includes('/user')}
                      title = {
                        <><FontAwesomeIcon icon = "user" />{user.username}</>
                      }
                      id = "basic-nav-dropdown">
                      <NavDropdown.Item
                        active = {'/user/order' === location.pathname}
                        onSelect = {this.select}
                        href = "/user/order">
                        {intl.get('order')}
                      </NavDropdown.Item>
                      <NavDropdown.Divider />
                      <NavDropdown.Item
                        onSelect = {() => {
                          dispatch({ type: LOGOUT_USER })
                          this.setState({ isLogin: false })
                          window.localStorage.clear()
                        }}>
                        {intl.get('logout')}
                      </NavDropdown.Item>
                    </NavDropdown>
                    : <>
                      <Nav.Link href = "/login">
                        <FontAwesomeIcon icon = "sign-in-alt" />
                        {intl.get('log in')}
                      </Nav.Link>
                      <Nav.Link href = {'/register'}>
                        <FontAwesomeIcon icon = "registered" />
                        {intl.get('register')}
                      </Nav.Link>
                    </>
                }
              </Nav>
              <Form inline>
                <Language />
              </Form>
            </Navbar.Collapse>
          </Container>
        </Navbar>
      </header>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    user: state.user
  }
}

export default withRouter(connect(mapStateToProps)(Header))
